<template>
  <div class="sort" @click="sort">
    <span class="sort-wrapper">
      <el-icon :class="{ active: sortNum === 1 }"><caret-top /></el-icon>
      <el-icon :class="{ active: sortNum === 2 }"><caret-bottom /></el-icon>
    </span>
    <span class="name"> {{ name }} </span>
  </div>
</template>

<script setup>
defineProps({
  name: {
    type: String,
    default: () => {
      return '排序'
    },
  },
})
const emits = defineEmits(['sort'])

const sortNum = ref(0)
function sort() {
  if (sortNum.value === 0) {
    sortNum.value = 1
    setParams()
    return
  }
  if (sortNum.value === 1) {
    sortNum.value = 2
    setParams()
    return
  }
  if (sortNum.value === 2) {
    sortNum.value = 0
    setParams()
    return
  }
}

function setParams() {
  emits('sort', sortNum.value)
}
</script>

<style scoped lang="scss">
.sort {
  display: flex;
  flex-direction: row;
}
.sort:hover {
  cursor: pointer;
}
.name {
  font-size: 14px;
  color: #606266;
  font-weight: bold;
}
.sort-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: -2px;
  .el-icon {
    height: 0.6em;
    color: #c0c4cc;
  }
  .el-icon.active {
    color: #409eff;
  }
}
</style>
